<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>个人信息</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script language="javascript" src="${pageContext.request.contextPath}/script/jquery-1.12.4.min.js"></script>
    <script language="javascript" src="${pageContext.request.contextPath}/script/pageCommon.js"
            charset="utf-8"></script>
    <script language="javascript" src="${pageContext.request.contextPath}/script/PageUtils.js" charset="utf-8"></script>
    <script language="javascript" src="${pageContext.request.contextPath}/script/DemoData.js" charset="utf-8"></script>
    <script language="JavaScript" src="${pageContext.request.contextPath}/script/ajaxfileupload.js"
            charset="UTF-8"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/style/blue/pageCommon.css"/>
    <script type="text/javascript">
        function uploadImg(){
            // 获取实际选中的文件数组
            var file = $("#imgUpload")[0].files[0];

            // 创建FormData()对象
            var formData = new FormData();

            // 封装文件数据
            formData.append("file", file);

            // 发送ajax请求执行上传
            $.ajax({
                "url":"${pageContext.request.contextPath}/user/uploadImg",
                "type":"post",
                "data":formData,
                "contentType":false,
                "processData":false,
                "success":function(resp){
                    deleteOldImg($("#avatar").attr('src'))
                    if (resp !== '' && resp !== null) {
                        $("#avatar").attr('src',resp);
                    }
                }
            });
        }

        function deleteOldImg(img) {
            $.ajax({
                "url":"${pageContext.request.contextPath}/user/deleteOldImg",
                "type":"post",
                "data":{img:img}
            })
        }

        let url = "${pageContext.request.contextPath}/user/editUserInfo.do?imageName="+$('#avatar').attr('src')
    </script>
</head>
<body>

<!-- 标题显示 -->
<div id="Title_bar">
    <div id="Title_bar_Head">
        <div id="Title_Head"></div>
        <div id="Title"><!--页面标题-->
            <img border="0" width="13" height="13"
                 src="${pageContext.request.contextPath}/style/images/title_arrow.gif"/> 个人信息
        </div>
        <div id="Title_End"></div>
    </div>
</div>

<!--显示表单内容-->
<div id=MainArea>
    <form action="editUserInfo.do" enctype="multipart/form-data">
        <div class="ItemBlock_Title1"><!-- 信息说明<DIV CLASS="ItemBlock_Title1">
        	<IMG BORDER="0" WIDTH="4" HEIGHT="7" SRC="../style/blue/images/item_point.gif" /> 个人信息 </DIV>  -->
        </div>

        <!-- 表单内容显示 -->
        <div class="ItemBlockBorder">
            <div class="ItemBlock">
                <table cellpadding="0" cellspacing="0" class="mainForm">
                    <tr>
                        <td width="150">用户ID（登录名）</td>
                        <td>${loginUser.loginName}</td>
                        <td rowspan="5" align="right">
                            <c:if test="${loginUser.image==null}">
                                <img src="${pageContext.request.contextPath}/style/images/defaultAvatar.gif" height="120" width="120" id="avatar"/>
                            </c:if>
                            <c:if test="${loginUser.image!=null&&loginUser.image!=''}">
                                <img src="${pageContext.request.contextPath}/images/${loginUser.image}" height="120" width="120" id="avatar"/>
                            </c:if>
                        </td>
                    </tr>
                    <tr>
                        <td>部门</td>
                        <td>${loginUser.department.name}</td>
                    </tr>
                    <tr>
                        <td>岗位</td>
                        <td><c:forEach items="${loginUser.roles}" var="role">${role.name}&nbsp;&nbsp;</c:forEach></td>
                    </tr>
                    <tr>
                        <td>姓名</td>
                        <td>${loginUser.name}</td>
                    </tr>
                    <tr>
                        <td>头像</td>
                        <td>
                            <input id="imgUpload" name="file" type="file" class="InputStyle" style="width: 400px;" onchange="uploadImg()"/>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- 表单操作 -->
        <div id="InputDetailBar">
            <input type="image" src="${pageContext.request.contextPath}/style/images/save.png"/>
            <a href="javascript:history.go(-1);"><img src="${pageContext.request.contextPath}/style/images/goBack.png"/></a>
        </div>
    </form>
</div>

<div class="Description">
    验证规则：<br/>
    1，可以修改自已的头像，在右侧是头像的预览。<br/>
</div>

</body>
</html>
